<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-row v-for="(value,key,index) in list" :key="index">
          <el-col :span="5">
            <el-form-item label="描述">
                <el-input v-model="value.item_desc" placeholder="描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="键">
                <el-input v-model="value.key" placeholder="key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="值">
                <el-input v-model="value.val" placeholder="val"></el-input>
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-col :span="5">
            <el-button @click="add" type="danger">添加</el-button>
            <el-button @click="onSubmit" type="primary">提交</el-button>
        </el-col>

      </el-form>
    </div>
  </div>
</template>

<script>
  import { myGet, myPost } from '@/utils/myRequest'
  const urlLst = '/guard/setting/sys/index'
  const urlAdd = '/guard/setting/sys/index'

  export default {
    data() {
      return {
        list:[]
      }
    },
    methods: {
      getRecords(){
        myGet(urlLst).then(res=>{
          this.list = res.data.records
          
        })
      },

      add(){
        this.list.push({
          item_desc:'',
          key:'',
          val:'',
        })
      },

      onSubmit() {
        myPost(urlAdd,{ settings:this.list }).then(res=>{
          if(res.status){
            this.$message.success(res.msg);
          }
        })
      }
    },
    mounted() {
      this.getRecords()
    },
  }
</script>

<style>

</style>
